﻿<!doctype html>
<html class="no-js" lang="zxx" xmlns:th="http://www.thymeleaf.org">
<!--房产-->
<head th:replace="layout::head(${title},${desc})"></head>
<body>
<div id="main-wrapper">
   <!--header-->
    <template th:replace="layout::header"></template>

    <!--Page Banner Section start-->
    <div class="page-banner-section section">
        <div class="container">
            <div class="row">
                <div class="col">
                    <h1 class="page-banner-title">房产</h1>
                    <ul class="page-breadcrumb">
                        <li><a th:href="@{/index.html}">主页</a></li>
                        <li class="active">房产</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!--Page Banner Section end-->

    <!--New property section start-->
    <div class="property-section section pt-100 pt-lg-80 pt-md-70 pt-sm-60 pt-xs-50 pb-100 pb-lg-80 pb-md-70 pb-sm-60 pb-xs-50">
        <div class="container">

            <!--内容-->
            <div class="row">
                <!--Property start-->
                <div th:each="property : ${propertiesAndRentTypeVOS}"  class="property-item col-lg-4 col-md-6 col-12 mb-40">
                    <div class="property-inner">
                        <div class="image">
                            <span class="label" th:text="${property.properties.isSpecial} == 0 ? '' : '特色' "></span>
                            <span class="label" th:text="${property.properties.isHot} == 0 ? '' : '热门'"></span>
                            <a th:href="@{single-properties.html}"><img th:src="${property.properties.pictureUrl}" alt=""></a>
                            <ul class="property-feature">
                                <li>
                                    <span class="area"><img src="assets/images/icons/area.png" alt="" th:text="${property.properties.square}"></span>
                                </li>
                                <li>
                                    <span class="bed"><img src="assets/images/icons/bed.png" alt="" th:text="${property.properties.roomNumber}"></span>
                                </li>
                                <li>
                                    <span class="bath"><img src="assets/images/icons/bath.png" alt="" th:text="${property.properties.bathroomNumber}" ></span>
                                </li>
                                <li>
                                    <span class="parking"><img src="assets/images/icons/parking.png" alt="" th:text="${property.properties.garageNumber}"></span>
                                </li>
                            </ul>
                        </div>
                        <div class="content">
                            <div class="left">
                                <h3 class="title"><a href="single-properties.html" th:text="${property.properties.title}"></a></h3>
                                <span class="location"><img src="assets/images/icons/marker.png" alt="" th:text="${property.properties.city}"></span>
                            </div>
                            <div class="right">
                                <div class="type-wrap">
                                    <span class="price" th:text="'￥'+ ${property.properties.price}"><span>月</span></span>
                                    <span class="type" th:text="${property.propertiesRentType.typeName}"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--Property end-->
            </div>

            <!--页数条-->
            <div class="row mt-20">
                <div class="col">
                    <ul class="page-pagination">
                        <li><a href="#"><i class="fa fa-angle-left"></i> Prev</a></li>
                        <li class="active"><a href="#">01</a></li>
                        <li><a href="#">02</a></li>
                        <li><a href="#">03</a></li>
                        <li><a href="#">04</a></li>
                        <li><a href="#">05</a></li>
                        <li><a href="#"><i class="fa fa-angle-right"></i> Next</a></li>
                    </ul>
                </div>
            </div>

        </div>
    </div>
    <!--New property section end-->

    <!--footer-->
    <template th:replace="layout::footer"></template>
</div>

<!-- Placed js at the end of the document so the pages load faster -->

<!-- All jquery file included here -->
<script src="http://ditu.google.cn/maps/api/js?sensor=false&libraries=geometry&v=3.22&key=AIzaSyDAq7MrCR1A2qIShmjbtLHSKjcEIEBEEwM"></script>
<script src="assets/js/vendor/jquery-1.12.4.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/plugins.js"></script>
<script src="assets/js/map-place.js"></script>
<script src="assets/js/main.js"></script>

</body>

</html>
